<div>
  <h2 class="m-b-8" [class.is-over-model]="isOverModel">注册</h2>
  <div class="full-with">
    <form class="login-form-wrap" nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-control nzErrorTip="账号!">
          <input type="text" formControlName="userName" nz-input nzSize="large" placeholder="账号" [placeholder]="'账号'" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control nzErrorTip="手机号码!">
          <input type="text" formControlName="userName" nz-input nzSize="large" placeholder="手机号码" [placeholder]="'手机号码'" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-row nzJustify="space-between">
        <nz-form-control class="flex-1" nz-col nzErrorTip="短信验证码!" style="max-width: 65%" [nzSm]="16" [nzXs]="15">
          <input type="text" formControlName="userName" nz-input nzSize="large" placeholder="短信验证码" [placeholder]="'短信验证码'" />
        </nz-form-control>
        <button class="p-0" nz-button nz-col nzType="default" [nzSize]="'large'" [nzSm]="7" [nzXs]="7">
          <span [ngStyle]="{ 'font-size': currentEquipmentWidth === equipmentWidthEnum.xs ? '0.8rem' : '1rem' }">获取验证码</span>
        </button>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control nzErrorTip="请输入密码!">
          <nz-input-group [nzSize]="'large'" [nzSuffix]="suffixTemplate1">
            <input
              autocomplete="on"
              formControlName="password"
              nz-input
              placeholder="密码"
              [placeholder]="'这里做一个确认密码的校验示例'"
              [type]="passwordVisible ? 'text' : 'password'"
              (ngModelChange)="updateConfirmValidator()"
            />
          </nz-input-group>
          <password-strength-meter [password]="password!.value"></password-strength-meter>
          <ng-template #suffixTemplate1>
            <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzErrorTip]="errorTpl">
          <nz-input-group [nzSize]="'large'" [nzSuffix]="suffixTemplate">
            <input
              autocomplete="on"
              formControlName="checkPassword"
              nz-input
              placeholder="请确认密码"
              [placeholder]="'这里做一个确认密码的校验示例'"
              [type]="compirePasswordVisible ? 'text' : 'password'"
            />
            <ng-template #errorTpl let-control>
              @if (control.hasError('required')) {
                Please confirm your password!
              }
              @if (control.hasError('confirm')) {
                两次输入的密码不正确!
              }
            </ng-template>
          </nz-input-group>
          <ng-template #suffixTemplate>
            <i nz-icon [nzType]="compirePasswordVisible ? 'eye-invisible' : 'eye'" (click)="compirePasswordVisible = !compirePasswordVisible"></i>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <div nz-row>
        <div nz-col [nzSpan]="24">
          <label formControlName="remember" nz-checkbox>
            <span>我同意xxx隐私政策</span>
          </label>
        </div>
      </div>
      <button class="full-with m-t-15 btn" nz-button nzSize="large" [nzType]="'primary'">注 册</button>
      <button class="full-with m-t-15" nz-button nzSize="large" [nzType]="'default'" (click)="goOtherWay(typeEnum.Normal)">返 回</button>
    </form>
  </div>
</div>
